<template>
  <div>
    <el-container>
        <!-- 顶部区域 -->
        <el-header height="75x">
            <el-row class="header">
                <el-col :span="4"><h1>用户管理系统:</h1></el-col>
                <!-- <el-col :span="4" :offset="15" v-if=""><h3>手机号：</h3></el-col> -->
                <el-col :span="4" :offset="14" v-if="isLogin">
                    <el-col :span="16" style="margin-top:10px">
                        <h5>你好！<span >{{loginUser.name}}</span></h5>
                    </el-col>
                    <el-col :span="6">
                        <h5><el-button type="text" @click="quitLogin"><span style="color:red">注销</span></el-button></h5>
                    </el-col> 
                </el-col>
                <el-col :span="4" :offset="15" v-else><h5>请<el-button type=text  @click="checkUser"><span :lass="loginClass">登录</span></el-button></h5></el-col>
                <el-col :span="1" ><el-button type="primary" icon="el-icon-upload2" circle ></el-button></el-col>
            </el-row> 
        </el-header>
        <!-- 中间区域 -->
        <el-container style="height:500px">
            <!-- 中间区域的左边区域 -->
            <el-aside width="200px">
            <el-menu
                :default-active="$router.history.current.path"
                class="el-menu-vertical-demo"

                background-color="#545c64"
                text-color="#fff"
                active-text-color="#ffd04b"
                :router="true">
                <template>

                </template>
                <!-- <el-menu-item v-for="ele in functions" :key="ele.functionId" :index="ele.url">
                    <i class="el-icon-menu"></i>
                    <span slot="title">{{ele.functionName}}</span>
                </el-menu-item> -->
                <el-menu-item index="/index/show">
                    <i class="el-icon-menu"></i>
                    <span slot="title">用户管理</span>
                </el-menu-item>
                <el-menu-item index="/manage/student">
                    <i class="el-icon-menu"></i>
                    <span slot="title">学生管理</span>
                </el-menu-item>
                <el-menu-item index="/manage/student">
                    <i class="el-icon-menu"></i>
                    <span slot="title">班级管理</span>
                </el-menu-item>
                <el-menu-item index="/manage/student">
                    <i class="el-icon-menu"></i>
                    <span slot="title">课程管理</span>
                </el-menu-item>
            </el-menu>
            </el-aside>
            <!-- 中间区域的中间区域 -->
            <el-main>
                <router-view></router-view>
            </el-main>
        </el-container>
    </el-container>
  </div>
</template>

<script>
import {mapState,mapMutations,mapActions} from "vuex"
export default {
    data(){
        return{
            isLogin:false
        }
    },
    computed:{
        ...mapState(["loginUser"])
    },
    methods:{
        ...mapMutations(["setLoginUser"]),
        ...mapActions(["quit","getUser"]),
        checkUser(){
            this.$router.push("/check");
        },
        async quitLogin(){
            await this.quit();
            this.$notify({
                message:"注销成功！",
                type:"success",
                duration:500
            });
            this.$router.push("/check");
        },

    },
    async mounted(){
        alert("不掉用");
        // await this.getUser();
        // if(this.loginUser != {}){
        //     this.isLogin = true;
        // }else{
        //    this.isLogin = false; 
        // }
    }
}
</script>

<style>
    .el-header{
        background: #2b303b;
        color: white;
        
    }
    .header{
        display: flex;
        align-items: center;
    }
    .el-container,.el-aside,.el-menu{
        height:100%;
        /* background-color: black; */
    }
    .el-aside{
        background-color: blue;
        border: brown;
    }
</style>